import { Link } from 'react-router-dom';
import { useState, useEffect } from 'react'
import Home from './Home';
import Mine from './Mine';
import { Switch, Route, Redirect } from 'react-router-dom';



function Index(props) {

  const [flag, setFlag] = useState(true)
  useEffect(() => {
    if (props.location.pathname === '/home') {
      setFlag(true)
    } else {
      setFlag(false)
    }
  })


  return (
    <>
      <div className="index">

      <Switch>
        <Route path="/home" component={Home}></Route>
        <Route path="/mine" component={Mine}></Route>
        <Redirect from="/" to="/home"></Redirect>
      </Switch>
      <div className="foot">
        <Link to="/" className={flag ? "sel" : ""}>
          <span className="indexicon"></span>
          <span>首页</span>
        </Link>
        <Link to="/mine" className={flag ? "" : "sel"}>
          <span className="myicon"></span>
          <span>我的</span>
        </Link>
      </div>

      </div>
    </>
  );

}

export default Index